<template>
    <div>
      <h1>{{ $t('message.welcome') }}</h1>
      <p>{{ translatedText }}</p>
      <p>{{ formattedDate }}</p>
  
      <button @click="changeLanguage('en')">English</button>
      <button @click="changeLanguage('zh')">中文</button>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import i18nService from '../utils/i18nservice';
  
  export default defineComponent({
    name: 'I18nExample',
    setup() {
      const originalText = 'message.hello';
      const dateValue = new Date();
  
      const changeLanguage = (locale: string) => {
        i18nService.currentLocale = locale;
      };
  
      const translatedText = computed(() => i18nService.t(originalText));
      const formattedDate = computed(() => i18nService.d(dateValue, 'long'));
  
      return {
        changeLanguage,
        translatedText,
        formattedDate
      };
    }
  });
  </script>